<template>
    <div class="tableContainer">
        <el-table
            ref="dataTables"
            :header-cell-class-name="xheader"
            :row-class-name="tableRowClassName"
            :data="tabelBody"
            style="width: 100%"
            :border="true"
            :height="availableHeight"
            :highlight-current-row="!tableConfig.selection"
            @selection-change="selectionChange"
            @row-click="clickChange"
        >
            <el-table-column
                type="selection"
                v-if="tableConfig.selection"
                width="55"
            >
            </el-table-column>
            <el-table-column
                type="index"
                v-if="tableConfig.index"
                :index="indexMethod"
                label="序号"
                width="90"
            >
            </el-table-column>
            <el-table-column
                v-if="tableConfig.id"
                prop="id"
                label="ID"
                width="90"
            ></el-table-column>

            <el-table-column
                v-for="(item, index) in tableHead"
                :key="index"
                :label="item.label"
                :show-overflow-tooltip="item.overflow"
                :width="item.width"
            >
                <template slot-scope="scope">
                    <ul v-if="item.tagsCode">
                        <li
                            v-for="(btn, btnIndex) in item.tags"
                            :key="btn.id"
                        >
                            <el-tag
                                size="small"
                                :type="btn.type"
                                v-if="btn.dictCode == scope.row[item.prop]"
                            >
                                {{ btn.dictName }}
                            </el-tag>
                        </li>
                    </ul>
                    <ul v-else-if="item.links">
                        <li
                            class="links"
                            title="点击即可跳转至详情"
                            @click.stop="linksTo(item.linksParams.path, item.linksParams.props, scope.row)"
                        >
                            <i class="el-icon-link"></i>{{ scope.row[item.prop] }}
                        </li>
                    </ul>
                    <li
                        v-else
                        class="el-table__expand-text"
                    >
                        {{ scope.row[item.prop] }}
                    </li>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            v-if="total != -1"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.pageNo"
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size="page.pageSize"
            layout="total,sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
    </div>
</template>
<script>
import { msg_error } from '@/assets/js/common'
import { mapGetters } from 'vuex'
export default {
    name: 'Table',
    data: function () {
        return {
            rowIndex: -1,
            lineData: [],
        }
    },
    computed: {
        ...mapGetters(['fullHeight', 'h1', 'h2']),
        availableHeight: function (val) {
            if (this.height > 0) {
                return this.height
            } else {
                return this.fullHeight - this.h1 - this.h2 - 136
            }
        },
    },
    props: ['tableHead', 'tabelBody', 'tableConfig', 'total', 'height', 'page'],
    methods: {
        tableRowClassName({ row, rowIndex }) {
            row.index = rowIndex
        },
        indexMethod(index) {
            return index + 1
        },
        xheader: function () {
            return 'xheader'
        },
        handleSizeChange(val) {
            this.page.pageSize = val
            this.$emit('getData', this.page)
        },
        handleCurrentChange(val) {
            this.page.pageNo = val
            this.$emit('getData', this.page)
        },
        linksTo(path, props, row) {
            let params = {}
            for (let i in props) {
                const key = props[i]
                const obj = { [key]: row[key] }
                params = { ...params, ...obj }
            }
            // console.log(params)
            // if (params.statusCode == '3') {
                this.$router.push({
                    path,
                    query: params,
                })
            // } else if (params.statusCode == '1') {
            //     msg_error('当前部署状态为:【待部署】，操作不被允许！')
            // } else if (params.statusCode == '2') {
            //     msg_error('当前部署状态为:【待启动】，操作不被允许！')
            // } else if (params.statusCode == '4') {
            //     msg_error('当前部署状态为:【停止】，操作不被允许！')
            // }
        },
        // 多选时返回数组
        selectionChange(val) {
            this.$emit('rowSelect', val, e)
        },
        // 点选时返回对象
        clickChange(val) {
            this.$emit('rowSelect', val)
        },
    },
}
</script>
<style
    lang="less"
    scoped
>
.links {
    cursor: pointer;
    color: #40a9ff;
}
</style>
